<template>
  <div class="new_dress">
          <nav-bar>
          <template v-slot:left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
          <template v-slot:center>{{address}}</template>
       </nav-bar>
       <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
         show-detail
        show-delete
        show-set-default
        @save="onSave"
        @delete="onDelete"
        />

  </div>
</template>

<script>
import { reactive, toRefs ,onMounted,computed} from 'vue'
import NavBar from '../components/common/NavBar.vue'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
 name:"NewAddRess",
 components:{
     NavBar
 },
 setup(){
     const store = useStore();
     const route = useRoute();
     const router = useRouter();
    let data = reactive({
      areaList: {
        province_list: {
          110000: "广东省",
          120000: "浙江省",
        },
        city_list: {
          110100: "广州市",
          110200: "深圳市",
          120100: "杭州市",
          120200: "宁波市",
        },
        county_list: {
          110101: "天河区",
          110102: "海珠区",
          120102: "上城区",
          130102: "下城区",
        },
      },
      addressInfo:{}
    });
      
    const  address = computed(()=>{
     return route.query.type=="add"?'地址新增':'地址编辑'
    })
    //    数据初始化
    const init=()=>{
    store.state.useAddress.forEach(item=>{
        if(route.query.id==item.id){
            data.addressInfo = item
        }
    })
    console.log(data.addressInfo);
    }
    onMounted(()=>{
       init()
    })

    // 路由返回 
    const backHome = ()=>{
        router.back();
    }
   const onSave = (content)=>{
        if(route.query.type=="add"){
          store.commit('ADD_RESS',content)
        }else{
          store.commit('CHANGE_ADDRESS',content)
        }
        console.log(111);
   }

   const onDelete = ()=>{

   }
    return {
        ...toRefs(data),
        onSave,
        onDelete,
        backHome,
        address
    }
 }
}
</script>

<style scoped lang="less">
 /deep/ .van-button--danger {
   background-color: #ffc400;
   border-color: #ffc400;
 }
</style>